
body{
	background-image: url("../img/a14.jpg");
	background-size: 1800px;
	overflow: hidden;
}
.container{
    width: 100%;
    max-width: 1200px;
    display: flex;
	margin-left: 10%;
}
.footer{
	         height: 40px;
	                line-height: 40px;
	                position: fixed;
	                bottom: 0;
	                width: 100%;
	                text-align: center;
	                background: #333;
	                color: #fff;
	                font-family: Arial;
	                font-size: 12px;
	                letter-spacing: 1px;
}
.footer{
	         height: 40px;
	                line-height: 40px;
	                position: fixed;
	                bottom: 0;
	                width: 100%;
	                text-align: center;
	                background: #333;
	                color: #fff;
	                font-family: Arial;
	                font-size: 12px;
	                letter-spacing: 1px;
}
.btn2 {
		height: 50px;
		opacity: 0.3;
		top: 0;
		cursor:pointer;
		width: 50px;
		position: absolute;
	
		letter-spacing: 10px;
		background-color: #93ab25;
		transition: 1s;
	
	}
	.btn2:hover{
		width: 200px;
		opacity: 1;
	}
	}
	.container{
		height: 100%;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 10%;
		
	}
	.footer img{
		height:90% ;
		border-radius: 50px;
	}
	.container .text{
		position: relative;
		color: #fff;
		font-weight: bold;
		margin-left: 35%;
		font-size: 30px;
		text-transform: uppercase;
		transform: scale(2);
		letter-spacing: 2px;
		padding: 30px;
	}
	.container .text:before,
	.container .text:after{
		position: absolute;
	content: attr(data-text);
	padding: 30px;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	/* background: #000; */
	color: #fff;
	overflow: hidden;
	}
	.container .text:before{
		left: 3px;
		text-shadow: -2px 0 red;
		animation: glitch-1 2s 0s linear reverse infinite;
	}
	
	.container .text:after{
		left: -3px;
		text-shadow: -2px 0 blue;
		animation: glitch-2 2s 0s linear reverse infinite;
	}
	@keyframes  glitch-1 {
		0%{
			clip:rect(132px,350px,101px,30px);
		}
		5%{
			clip:rect(17px,350px,94px,30px);
		}
		10%{
			clip:rect(85px,350px,66px,30px);
		}
		15%{
			clip:rect(91px,350px,91px,30px);
		}
		
		20%{
			clip:rect(137px,350px,61px,30px);
		}
		25%{
			clip:rect(34px,350px,14px,30px);
		}
		30%{
			clip:rect(76px,350px,107px,30px);
		}
		35%{
			clip:rect(98px,350px,71px,30px);
		}
		40%{
			clip:rect(146px,350px,34px,30px);
		}
		45%{
			clip:rect(134px,350px,43px,30px);
		}
		50%{
			clip:rect(102px,350px,80px,30px);
		}
		55%{
			clip:rect(119px,350px,44px,30px);
		}
		60%{
			clip:rect(106px,350px,99px,30px);
		}65%{
			clip:rect(141px,350px,74px,30px);
		}70%{
			clip:rect(20px,350px,78px,30px);
		}75%{
			clip:rect(133px,350px,79px,30px);
		}80%{
			clip:rect(78px,350px,52px,30px);
		}85%{
			clip:rect(35px,350px,39px,30px);
		}90%{
			clip:rect(71px,350px,103px,30px);
		}
		95%{
			clip:rect(71px,350px,103px,30px);
		}100%{
			clip:rect(83px,350px,40px,30px);
		}
	}
	@keyframes  glitch-2 {
		0%{
			clip:rect(132px,350px,101px,30px);
		}
		5%{
			clip:rect(17px,350px,94px,30px);
		}
		10%{
			clip:rect(85px,350px,66px,30px);
		}
		15%{
			clip:rect(91px,350px,91px,30px);
		}
		
		20%{
			clip:rect(137px,350px,61px,30px);
		}
		25%{
			clip:rect(34px,350px,14px,30px);
		}
		30%{
			clip:rect(76px,350px,107px,30px);
		}
		35%{
			clip:rect(98px,350px,71px,30px);
		}
		40%{
			clip:rect(146px,350px,34px,30px);
		}
		45%{
			clip:rect(134px,350px,43px,30px);
		}
		50%{
			clip:rect(102px,350px,80px,30px);
		}
		55%{
			clip:rect(119px,350px,44px,30px);
		}
		60%{
			clip:rect(106px,350px,99px,30px);
		}65%{
			clip:rect(141px,350px,74px,30px);
		}70%{
			clip:rect(20px,350px,78px,30px);
		}75%{
			clip:rect(133px,350px,79px,30px);
		}80%{
			clip:rect(78px,350px,52px,30px);
		}85%{
			clip:rect(35px,350px,39px,30px);
		}90%{
			clip:rect(71px,350px,103px,30px);
		}
		95%{
			clip:rect(71px,350px,103px,30px);
		}100%{
			clip:rect(83px,350px,40px,30px);
		}
	}
.card{
    /* 相对定位 */
	position: relative;
	/* 自动放大占满剩余空间 */
	flex: 1;
    height: 460px;
    margin: 10% 10px 0 10px;
    /* 设置视距 */
    perspective: 1000px;
	opacity: 0.8;
	cursor:pointer;
}
/* 投影效果 */
.card::before{
    content: "";
    width: 90%;
    height: 90%;
    background-color: rgba(0,0,0,0.5);
    /* 绝对定位 */
    position: absolute;
    left: 5%;
    top: 5%;
    /* 投影 */
    box-shadow: 0 6px 12px 12px rgba(0,0,0,0.4);
    opacity: 1;
    /* 设置旋转元素的基点位置 */
    transform-origin: top center;
    /* 设置过渡:时长 加速后减速 */
    transition: 0.3s ease-in-out;
}
/* 鼠标移上,投影的变化 */
.card:hover::before{
    opacity: 1;
    transform: rotateX(7deg) translateY(-6px) scale(1.05);
}
/* 封面 */
.card-cover{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 设置旋转元素的基点位置 */
    transform-origin: top center;
    /* 设置过渡 */
    transition: transform 0.35s ease-in-out;
}
.card-cover::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 120%;
    /* 背景渐变(高光效果) */
    background: linear-gradient(226deg,rgba(255,255,255,0) 40%,rgba(255,255,255,0.3) 50%,rgba(255,255,255,0) 60%);
    /* 默认上移出可视范围 */
    transform: translateY(-100%);
    /* 设置过渡 */
    transition: transform 0.85s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.card:hover .card-cover{
    transform: rotateX(7deg) translateY(-6px);
}
.card:hover .card-cover::after{
    transform: translateY(100%);
}